<html xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui">

<h:head>

  <title>Sistema Inmune</title>
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />

  <style type="text/css">
    .centered {
    margin: 200px auto;
    }
  </style>

<script type="text/javascript">
  //<![CDATA[
  function manejarLogin(xhr, status, args) {
    if (!args.validationFailed && args.estaLogeado) {
      setTimeout(function() {
        window.location = args.view;
      }, 500);
    }
  }
//]]>
  </script>

</h:head>

<h:body style="text-align:center;background-color:#f0f0f0;">
   <p:growl id="mensajes" showDetail="true" life="2000" />
   <h:form>
     <p:panel align="center" style="width:584px" styleClass="centered" >
       <h:panelGrid columns="3" cellpadding="5">
         <h:graphicImage value="img/logoContenedor.png" />         
         <h:panelGrid columns="2" cellpadding="5">
           <h:outputLabel for="username" value="Usuario:" />
           <p:inputText value="#{Login.nombre}" id="username"
             required="true" label="username" />
           <h:outputLabel for="password" value="Clave:" />
           <p:password value="#{Login.clave}" id="password" required="true"
           label="password" />
           <f:facet name="footer">
             <p:commandButton id="loginButton" value="Ingresar"
             actionListener="#{Login.login}" update=":mensajes"
             oncomplete="manejarLogin(xhr, status, args)" />
           </f:facet>
         </h:panelGrid>
       </h:panelGrid>
     </p:panel>
   </h:form>
  
</h:body>

</html>